<%@ page contentType="text/html;charset=UTF-8" language="java" import="entity.Product,entity.User" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>${sessionScope.categoryName}</title>
    <link href="../css/categoryCss.css" rel="stylesheet">
</head>
<body>
    <jsp:include page="Header.jsp"></jsp:include>
    <div id="category">
        <div>
            <nav class="breadcrumb" style="padding-left:100px;">
                <a class="breadcrumb-item" href="/">首页</a>
                <span class="breadcrumb-item">分类</span>
                <span class="breadcrumb-item active">${sessionScope.categoryName}</span>
            </nav>
        </div>
        <div id="categoryList">
            <ul>
                <c:forEach items="${sessionScope.pageProduct}" var="product">
                    <li>
                        <a href="/service/product_details?productId=${product.getProductId()}">
                            <img src="${product.getDefaultImg()}" title="${product.getProductName()}" class="productDefaultImg">
                        </a>

                        <div class="productDesc">
                            <span class="productName">${product.getProductName()}</span>
                            <span style="color:red;font-size:20px;">$${product.getPrice()}</span>
                        </div>
                        <div class="wish" onclick="addWish(${product.getProductId()},${sessionScope.user.getId()})">
                            <i class="glyphicon glyphicon-heart-empty logo"></i>
                        </div>
                    </li>
                </c:forEach>
            </ul>
        </div>
        <div id="page">
            <ul class="pagination">
                <li class="page-item">
                    <a class="page-link" href="/service/category_details?pageIndex=${sessionScope.currentPage - 1}&categoryId=${sessionScope.categoryId}">&laquo;</a>
                </li>
                <c:forEach begin="1" end="${sessionScope.dataLength}" varStatus="state">
                    <c:if test="${state.index == sessionScope.currentPage}">
                        <li class="page-item active">
                            <a class="page-link" href="/service/category_details?pageIndex=${state.index}&categoryId=${sessionScope.categoryId}">${state.index}</a>
                        </li>
                    </c:if>
                    <c:if test="${state.index != sessionScope.currentPage}">
                        <li class="page-item">
                            <a class="page-link" href="/service/category_details?pageIndex=${state.index}&categoryId=${sessionScope.categoryId}">${state.index}</a>
                        </li>
                    </c:if>
                </c:forEach>
                <li class="page-item">
                    <a class="page-link" href="/service/category_details?pageIndex=${sessionScope.currentPage + 1}&categoryId=${sessionScope.categoryId}">&raquo;</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="tipBox"></div>
    <jsp:include page="${pageContext.request.contextPath}/page/Footer.jsp"></jsp:include>

    <script>
        function addWish(productId,userId){
            if(userId == null){
                location.href="/page/login";
            }else {
                $.get('/service/product_wish?productId='+ productId + '&userId=' + userId,function(data){
                    if(data == 'Success'){
                        $('.tipBox').append(` <div class="alert alert-success" style="width:20%; margin-left:40%">
                                         <i class="glyphicon glyphicon-ok"></i> <strong class="msg"></strong>
                                   </div>`) ;
                    }else {
                        $('.tipBox').append(`<div class="alert alert-danger" style="width:20%; margin-left:40%">
                                        <i class="glyphicon glyphicon-remove"></i> <strong class="msg"></strong>
                                  </div>`);
                    }
                    $('.msg').text(data == 'Success' ? 'Add successfully!' : data == 'product repeat' ? data : 'Add failed!');

                    setTimeout(() => { $('.tipBox').empty(); },3000);
                })
            }
        }
    </script>
</body>
</html>
